<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        :-webkit-full-screen body {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <div>
        <input type="button" id="full" value="全屏">
        <input type="button" id="cancelFull" value="退出全屏">
    </div>
    <script>
        /*全屏操作的主要方法和属性
        * 1.requestFullScreen():开启全屏显示
        *   不同浏览器需要添加不同的前缀
        *   chrome:webkit   firefox:moz   ie:ms   opera:o
        * 2.cancelFullScreen():退出全屏显示:也添加前缀，在不同的浏览器下.退出全屏只能使用document来实现
        * */
        window.onload = function () {
            //一个你想要以全屏模式展示的元素,这里是body
            var div = document.querySelector("body");
            var agent = navigator.userAgent.toLowerCase();
            var isIE = agent.indexOf("compatible") > -1 && agent.indexOf("msie" > -1); //判断是否IE<11浏览器
            /*全屏操作*/
            document.querySelector("#full").onclick = function () {
                if (div.requestFullScreen) {
                    div.requestFullScreen();
                }
                else if (div.webkitRequestFullScreen) {  //WebKit (Safari) / Blink (Chrome & Opera) / Edge
                    div.webkitRequestFullScreen();
                }
                else if (div.mozRequestFullScreen) {   //Gecko (Firefox)
                    div.mozRequestFullScreen();
                }
                else if (div.msRequestFullscreen) {  //Internet Explorer
                    div.msRequestFullscreen();
                }
                else if(isIE){                  //ie11版本以下
                    var wscript = new ActiveXObject("WScript.Shell");
                    if (wscript) {
                        wscript.SendKeys("{F11}");
                    } 
                }
            }
            /*退出全屏*/
            document.querySelector("#cancelFull").onclick = function () {
                if (document.exitFullscreen) {
                    document.exitFullscreen();
                    return
                } else if (document.msExitFullscreen) {  //Internet Explorer
                    document.msExitFullscreen();
                } else if (document.mozCancelFullScreen) {  //Gecko (Firefox)
                    document.mozCancelFullScreen();
                   
                } else if (document.webkitExitFullscreen) {  //WebKit (Safari) / Blink (Chrome & Opera) / Edge 
                    document.webkitExitFullscreen();
        
                }else if(isIE){      //ie11版本以下
                    var wscript = new ActiveXObject("WScript.Shell");
                    if (wscript) {
                        wscript.SendKeys("{F11}");
                    } 
                }
            }
        }
    </script>
</body>

</html>